import React, { memo } from 'react';
// import { getSongDetail } from '../../../services/player';
import { Slider } from 'antd';
import {
  PlayerBarWrapper,
  Control,
  PlayInfo,
  Operator
} from './style'; 

export default memo(function ASAppPlaybar() {

// useEffect(() => {
//   getSongDetail().then(res => {
//     console.log(res);
//   })
// },[])


  return (
    <PlayerBarWrapper className="sprite_player">
      <div className="content wrap-v2">
      <Control>
        <button className="sprite_player prev"></button>
        <button className="sprite_player play"></button>
        <button className="sprite_player next"></button>
      </Control>
      <PlayInfo>
        <div className='image'>
          <a href='#/'>
            <img alt='' src='https://p1.music.126.net/f0WGh-wxHDVuAKFM9MsZSA==/109951166633361765.jpg?param=34y34'></img>
          </a>
        </div>
        <div className='info'>
          <div className='song'>
            <span className='song-name'>红豆</span>
            <a href='/#' className='singer-name'>DJ铁柱</a>
          </div>
          <div className='progress'>
            <Slider defaultValue={30}  />
            <span className='now-time'>02:30</span>
            <span className='divider'>/</span>
            <span className='divider'>4:30</span>
          </div>
        </div>
      </PlayInfo>
      <Operator>
        <div className='left'>
          <button className='sprite_player btn favor'></button>
          <button className='sprite_player btn share'></button>
        </div>
        <div className='right sprite_player'>
          <button className='sprite_player btn volume'></button>
          <button className='sprite_player btn loop'></button>
          <button className='sprite_player btn playlist'></button>
        </div>
      </Operator>
      </div>
    </PlayerBarWrapper>
  )
})
